<template>
    <view>
		<view class="welcome" v-if="!list || list.length == 0">
			<view class="nodata">
				<image mode="widthFix" src="/static/images/ic_nodata.png"></image>
				<view class="tips">暂无数据~</view>
			</view>
		</view>
        <view class="list" v-else>
            <view class="item" v-for="(item, index) in list" @tap="toArticle" :data-id="item.id">{{ index + 1}}、{{ item.title }}</view>
        </view>
    </view>

</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            type: 'help',
			list: []
        };
    },
    onLoad(options) {
		const type = options.type
		this.setData({
			type: type
		})
		if(type == 'help') {
			uni.setNavigationBarTitle({
			  title: this.$lang('使用教程')
			})
		}
		app.globalData.util.request({
			url: '/article/getList',
			data: {
				type: type
			}
		}).then(res => {
			this.setData({
				list: res.data.list
			})
		})
    },
    methods: {
		toArticle(e) {
			const id = e.currentTarget.dataset.id
			wx.navigateTo({
			  url: '/pages/article/article?type=' + this.type + '&id=' + id
			})
		}
	}
};
</script>
<style>
.list {
    background: rgba(255, 255, 255, 0.8);
	margin: 30rpx;
	border-radius: 20rpx;
	overflow: hidden;
}
.item {
    line-height: 40rpx;
    padding: 40rpx 40rpx;
    font-size: 32rpx;
    color: #333;
    border-radius: 10rpx;
    border-bottom: 1px solid #f2f2f2;
}
.item:active {
    background: #f3f3f4;
}
.item:last-child {
    border-bottom: none;
}
.welcome {
	position: absolute;
	top: 360rpx;
	left: 80rpx;
	width: 590rpx;
    height: 660rpx;
}
  
.welcome .nodata {
    width: 590rpx;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.welcome .nodata image {
    width: 300rpx;
    height: 300rpx;
}
.welcome .nodata .tips {
    width: 100%;
    color: #8d9393;
    font-size: 32rpx;
    margin-top: 40rpx;
}

</style>
